<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax请求</title>
	</head>
	<body>
		<button id="load">加载更多</button>
		<div id="photos"></div>
		<script>
			(() => {
				const photos = document.querySelector('#photos')
				const loadBtn = document.querySelector('#load')
				// 页数变量
				var page = 0
				loadBtn.addEventListener('click',() => {
					// 每点击一下，加一页
					page += 1
					// 创建异步请求对象 (IE9以下都不支持以下写法)
					let xhr = new XMLHttpRequest()
					// api必须要带有正确的key值才能返回数据  true表示异步请求
					xhr.open('get','http://api.tianapi.com/meinv/index?key=1032f66a7a384b95ee84b304bbe9f4d6&num=10&page='+page,
								true
					)
					// 绑定事件回调函数，在收到服务器返回的数据后要对页面进行局部刷新
					xhr.addEventListener('readystatechange',() =>{
						if (xhr.readyState == 4 && xhr.status == 200) {
							//alert(typeof xhr.responseText)
							// 把返回的JSON字符串解析成JavaScript的对象
							let json = JSON.parse(xhr.responseText)
							// 执行JSON数据里面每个参数
							json.newslist.forEach((mm) => {
								// 在控制台显示
								//console.log(mm.picUrl)
								
								let img = document.createElement('img')
								img.src = mm.picUrl
								img.width = 300
								photos.insertBefore(img,photos.firstElementChild)
							})
						}
					})
					// 发送异步请求
					xhr.send()
				})
			})()
		</script>
	</body>
</html>
